<template>
  <div class="image-table">
    <h2 class="header-title">图片管理系统 (共 {{ imageData.count }} 张图片)</h2>

    <el-table
      :data="imageData.images"
      class="image-table"
      stripe
      border
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        label="序号"
        width="80"
        align="center"
      >
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column
        label="文件名"
        prop="name"
        width="200"
        align="center"
      />

      <el-table-column
        label="图片预览"
        align="center"
      >
        <template #default="scope">
          <img
            :src="scope.row.url"
            class="image-preview"
          >
        </template>
      </el-table-column>

      <el-table-column
        label="图片地址"
        align="center"
      >
        <template #default="scope">
          <el-link
            type="primary"
            :href="scope.row.url"
            target="_blank"
          >
            {{ scope.row.url }}
          </el-link>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="120"
        align="center"
      >
        <template #default="scope">
          <div class="action-cell">
            <el-button
              type="danger"
              size="small"
              icon="Delete"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, onMounted} from 'vue';
import {ElMessageBox, ElMessage} from 'element-plus';
import ImgAPI, {ImgInfo, ImgInfoData} from "@/api/system/img.api";

export default defineComponent({
  name: 'ImageTable',
  setup() {
    // 响应式数据
    const imageData = reactive<ImgInfoData>({
      count: 0,
      images: []
    });

    // 从API获取数据
    const fetchImages = async () => {
      try {
        const response = await ImgAPI.getAllImg();
          imageData.count = response.count;
          imageData.images = response.images;

      } catch (error) {
        ElMessage.error('请求失败: ' );
      }
    };

    // 组件挂载时获取数据
    onMounted(() => {
      fetchImages();
    });

    // 行样式处理
    const tableRowClassName = ({rowIndex}: { rowIndex: number }) => {
      return rowIndex % 4 === 0 ? 'warning-row' : '';
    };

    // 删除图片
    const handleDelete = (index: number, row: ImgInfo) => {
      ElMessageBox.confirm(
        `确定要删除图片 ${row.name} 吗？`,
        '警告',
        {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(async () => {
        // 这里应该调用删除接口，然后更新数据
        await ImgAPI.deleteImg(row.name);
        await fetchImages();
        ElMessage({
          type: 'success',
          message: `图片 ${row.name} 已删除`,
          duration: 2000
        });
      }).catch(() => {
        // 取消删除
      });
    };

    return {
      imageData,
      tableRowClassName,
      handleDelete
    };
  }
});
</script>

<style scoped>
.image-table {
  width: 90%;
  margin: 20px auto;
}

.image-preview {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s;
}

.image-preview:hover {
  transform: scale(1.8);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 100;
}

:deep(.el-table .warning-row) {
  background-color: #fdf6ec;
}

.action-cell {
  display: flex;
  justify-content: center;
}

.header-title {
  text-align: center;
  font-size: 20px;
  margin: 20px 0;
  color: #409EFF;
}
</style>
